<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AdminLTE 3 | Dashboard 3</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- IonIcons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/adminlte.min.css">
  <!-- 李磊的css -->
  <link rel="stylesheet" href="lilei.css">
  <!-- 引入ElementUi的css -->
  <link rel="stylesheet" href="plugins/elementUI/index.css">


</head>
<!--
`body` tag options:

  Apply one or more of the following classes to to the body tag
  to get the desired effect

  * sidebar-collapse
  * sidebar-mini
-->

<body class="hold-transition sidebar-mini">
  <div id="app" class="wrapper">
    <!-- Content Header (Page header) -->
    <nav class="navbar navbar-expand navbar-white navbar-light">
      <ul class="nav nav-tabs">
        <li id="system1" class="dropdown" style="display: none;"><a data-toggle="dropdown" href="#"
            style="color: black; font-size: 20px;"> 用户管理 </a>
        </li>
        <li id="system2" class="dropdown" style="display: none;"><a data-toggle="dropdown" href="#"
            style="color: black; font-size: 20px;"> 角色管理 </a>
        </li>
        <li id="system3" class="dropdown" style="display: none;"><a data-toggle="dropdown" href="#"
            style="color: black; font-size: 20px;"> 仓库管理 </a>
        </li>
        <li id="system4" class="dropdown" style="display: none;"><a data-toggle="dropdown" href="#"
            style="color: black; font-size: 20px;"> 导出任务 </a>
        </li>
      </ul>

    </nav>
    <script type="text/javascript">
      function system() {
        document.getElementById("system1").style.display = "none";
        document.getElementById("system2").style.display = "none";
        document.getElementById("system3").style.display = "none";
        document.getElementById("system4").style.display = "none";

      }
      function system1() {
        document.getElementById("system1").style.display = "";
        document.getElementById("system2").style.display = "none";
        document.getElementById("system3").style.display = "none";
        document.getElementById("system4").style.display = "none";
        document.getElementById("usercontrol").style.display = "";
      }
      function system2() {
        document.getElementById("system2").style.display = "";
        document.getElementById("system1").style.display = "none";
        document.getElementById("system3").style.display = "none";
        document.getElementById("system4").style.display = "none";
      }
      function system3() {
        document.getElementById("system3").style.display = "";
        document.getElementById("system1").style.display = "none";
        document.getElementById("system2").style.display = "none";
        document.getElementById("system4").style.display = "none";
      }
      function system4() {
        document.getElementById("system4").style.display = "";
        document.getElementById("system1").style.display = "none";
        document.getElementById("system2").style.display = "none";
        document.getElementById("system3").style.display = "none";
      }
    </script>

    <!-- ---------------------局部刷新-------------------------- -->
    <div class="content-header">
      <div id="usercontrol" style="display: '';">
        <div class="row" style="height: 50px;">
          <div class="col-md-2">

          </div>
          <div class="col-md-3"></div>
          <div class="col-md-7">
            <div class="btn-group">
              <div class="btn-group" style="margin: 10px;width: 250px;height: 30px;">
                <button type="button" class="btn btn-default" v-on:click="all()"
                  style="line-height: 14px;font-size: 14px;">全部</button>
                <button type="button" class="btn btn-default" v-on:click="doing()"
                  style="line-height: 14px;font-size: 14px;">进行中</button>
                <button type="button" class="btn btn-default" v-on:click="done()"
                  style="line-height: 14px;font-size: 14px;">已完成</button>
                <button type="button" class="btn btn-default" v-on:click="failure()"
                  style="line-height: 14px;font-size: 14px;">失败</button>
              </div>
              <div class="input-group" style="margin: 5px;width: 330px;">
                <input id="search" type="text" class="form-control" v-model="searchwords" placeholder="请输入任务名称关键字">
                <span class="input-group-btn">
                  <button v-on:click="search()" class="btn btn-block btn-primary">
                    搜索
                  </button>
                </span>
                <i class="nav-icon fas fa-undo" style="margin: 10px;"></i>

              </div>

            </div>

          </div>
        </div>
        <div class="row" style="text-align: center;">
          <table class="table table-condensed" style="border-bottom: 1px solid rgb(216, 216, 216);;">
            <caption></caption>
            <thead>
              <tr>
                <th>序号</th>
                <th>任务名称</th>
                <th>任务类型</th>
                <th>状态</th>
                <th>任务时间</th>
                <th>操作</th>

              </tr>
            </thead>
            <tbody>
              <!-- <tr>
                <td>1</td>
                <td>storage_003b34ab-7a23-11ea-8977-0242ac11000f</td>
                <td>入库单</td>
                <td>进行中</td>
                <td>
                  2020-10-27 20:15:32
                </td>
                <td>
                  <i class="nav-icon fas fa-download" style="margin: 5px;margin-left: 10px;"></i>
                </td>
              </tr>
              <tr> -->
              <tr v-for="(assignment,key) in assignments">
                <td>{{key+1}}</td>
                <td>{{assignment.aname}}</td>
                <td>{{assignment.category}}</td>
                <td>{{assignment.status}}</td>
                <td>
                  {{assignment.time}}
                </td>
                <td>
                  <i class="nav-icon fas fa-download" style="margin: 5px;margin-left: 10px;"></i>
                </td>

              </tr>



            </tbody>
          </table>
          <div class="block" style="margin-top: -20px;">
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="currentPage4" background :page-sizes=[12] :page-size="12"
              layout="total, prev, pager, next, sizes, jumper" :total="1342">
            </el-pagination>
          </div>

        </div>


      </div>

    </div>

  </div>
  <!-- ./wrapper -->

  <!-- REQUIRED SCRIPTS -->

  <!-- jQuery -->
  <script src="plugins/jquery/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!-- AdminLTE -->
  <script src="dist/js/adminlte.js"></script>

  <!-- OPTIONAL SCRIPTS -->
  <script src="plugins/chart.js/Chart.min.js"></script>
  <!-- AdminLTE for demo purposes -->
  <script src="dist/js/demo.js"></script>
  <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
  <script src="dist/js/pages/dashboard3.js"></script>
  <!-- 引入VUE -->
  <script src="plugins/vue-2.6.10/vue-resource.min.js"></script>
  <script src="plugins/vue-2.6.10/vue.js"></script>
  <!-- 引入axios -->
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  <!--引入ElementUi-->
  <script src="plugins/elementUI/index.js"></script>
  <script>
    $(function () {
      var wer = new Vue({
        el: "#app",
        data() {
          return {
            value: true,
            currentPage4: 100,
            assignments: [],
            searchwords: "",
          }
        },
        //发送请求查询所有角色信息
        mounted() {
          axios
            .get('assignment/all')
            .then(res => {
              console.info(res.data);
              this.assignments = res.data;
            })
        },


        methods: {
          //分页
          handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
          },
          handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
          },
          //全部
          all: function () {
            axios
              .get('assignment/all')
              .then(res => {
                console.info(res.data);
                this.assignments = res.data;
              })
          },
          //进行中
          doing: function () {
            axios
              .get('assignment/findbystatus?status=1')
              .then(res => {
                console.info(res.data.data);
                this.assignments = res.data.data;
              })
          },
          //已完成
          done() {
            axios
              .get('assignment/findbystatus?status=2')
              .then(res => {
                console.info(res.data.data);
                this.assignments = res.data.data;
              })
          },
          //失败
          failure() {
            axios
              .get('assignment/findbystatus?status=0')
              .then(res => {
                console.info(res.data.data);
                this.assignments = res.data.data;
              })
          },
          //模糊搜索
          search() {
            axios
              .get('assignment/findbywords?words=' + this.searchwords)
              .then(res => {
                console.info(res.data.data);
                this.assignments = res.data.data;
              })
          }


        }
      });
    })
  </script>
</body>

</html>